<template>
  <div class="view-board-right-wrap" ref="container">
    <div class="view-board-main" ref="vbMain">
      <div class="vb-main-container" ref="vbContainer">
        <component v-for="component in configData" :is="component.type" :key="component.id" :isPreview="isPreview"
          :config="component" :ref="component.id" @handleSearch="handleSearch" @handleReset="handleReset"></component>
      </div>
    </div>
  </div>
</template>

<script>
import Container from './container'
import Space from './space'
import Chart from './chart'
import FilterWrap from './filterWrap'
import TimerMixin from '../../../dataComponents/mixins/timer'
import ViewBoardIndex from '../mixin/ViewBoardIndex'

import domtoimage from 'dom-to-image'

export default {
  name: 'preview',
  props: {
    configData: {
      type: Array,
      default: () => []
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String]
    },
    filterConfig: {
      type: Object,
    },
  },
  components: {
    Container,
    Space,
    Chart,
    FilterWrap
  },
  mixins: [TimerMixin, ViewBoardIndex],
  data() {
    return {}
  },
  methods: {
    // handleSearch(reset) {
    //   this.$emit('handleSearch', reset)
    // },
    // handleReset() {
    //   this.$emit('handleReset')
    // },
    exportPDF(fileName) {

      let el = this.$refs.container

      let allTable = [...el.querySelectorAll('.el-table__body-wrapper')]
      let allContainer = [...el.querySelectorAll('.chart-components-wrap')]


      allContainer.forEach(containerEL => {
        containerEL.style.overflowY = 'hidden';
      })

      allTable.forEach(tableEL => {
        tableEL.style.overflow = 'hidden'
      })

      return new Promise((resolve, reject) => {
        domtoimage.toJpeg(el, { quality: 0.95 }).then(dataUrl => {
          try {
            let link = document.createElement('a')
            link.download = fileName || '报表'
            link.href = dataUrl
            link.click()
          } catch (e) {
            reject(e)
          }
          resolve()
        }).finally(() => {
          allTable.forEach(tableEL => {
            tableEL.style.overflow = 'auto'
          })
          allContainer.forEach(containerEL => {
            containerEL.style.overflowY = 'scroll'
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.view-board-right-wrap {
  background: #eee;
  overflow: hidden;
}
</style>
